﻿@page "/read"
@inherits ImportantComponentBase

<MyAppBar>
    <MButton Icon="true"
             OnClick="NavigateToBack">
        <MIcon>
            mdi-arrow-left
        </MIcon>
    </MButton>

    <MSpacer></MSpacer>
    <MButton Icon="true"
             OnClick="()=>showShare=true">
        <MIcon>
            mdi-share-variant-outline
        </MIcon>
    </MButton>
    <MButton Icon="true"
             OnClick="OpenDeleteDialog">
        <MIcon>
            mdi-delete-outline
        </MIcon>
    </MButton>
    <MButton Icon="true"
             OnClick="OnEdit">
        <MIcon>
            mdi-pencil
        </MIcon>
    </MButton>

    <MultiMenu @bind-Visible="showMenu"
               DynamicListItems="menuItems">
        <ActivatorContent>
            <MButton @attributes="@context.Attrs"
                     Icon="true">
                <MultiDisplay>
                    <DesktopContent>
                        <MIcon>mdi-dots-horizontal</MIcon>
                    </DesktopContent>
                    <MobileContent>
                        <MIcon>mdi-dots-vertical</MIcon>
                    </MobileContent>
                </MultiDisplay>
            </MButton>
        </ActivatorContent>
    </MultiMenu>
</MyAppBar>

<ScrollContainer ContentStyle="padding-top:0px;">
    <div id="screenshot" class="primary-background">
        <div class="d-flex align-center px-3">
            <span class="text-h6 font-weight-bold">
                @(diary.CreateTime.ToString("d"))
            </span>

            <span class="ml-5 text-subtitle-2">
                @(I18n.ToWeek(diary.CreateTime))
            </span>

            <MSpacer></MSpacer>

            <span class="text-subtitle-2">
                @(CounterValue())
            </span>
        </div>

        <div>
            @if (ShowWeather)
            {
                <DiaryInfoButton Icon="@WeatherIcon"
                                 Text="@WeatherText">
                </DiaryInfoButton>
            }

            @if (ShowMood)
            {
                <DiaryInfoButton Icon="@MoodIcon"
                                 Text="@MoodText">
                </DiaryInfoButton>
            }

            @if (ShowLocation)
            {
                <DiaryInfoButton Icon="mdi-map-marker-outline"
                                 Text="@LocationText">
                </DiaryInfoButton>
            }

        </div>

        @if (ShowTitle)
        {
            <MTextField Value="@(diary.Title)"
                        TValue="string"
                        Class="pb-0 my-sm-4 user-select font-weight-bold"
                        Solo="true"
                        Flat="true"
                        BackgroundColor="transparent"
                        HideDetails="@("auto")"
                        Dense="true"
                        Readonly="true"
                        maxlength="20">
            </MTextField>
        }

        <div class="my-sm-3">
            @if (enableMarkdown)
            {
                <MarkdownPreview @ref="markdownPreview"
                                 Value="@(diary.Content)"
                                 Class="px-3"
                                 Style="padding-top:10px">
                </MarkdownPreview>
            }
            else
            {
                <MTextarea Value="@(diary.Content)"
                           Class="user-select"
                           Solo="true"
                           Flat="true"
                           BackgroundColor="transparent"
                           HideDetails="@("auto")"
                           Readonly="true"
                           AutoGrow="true"
                           Rows="8"
                           RowHeight="30">
                </MTextarea>
            }
        </div>

        <div class="mb-5">
            <MChipGroup Column="true">
                @foreach (var item in Tags)
                {
                    <MChip @key="item.Id"
                           Style="pointer-events:none;"
                           Outlined="true">
                        @(item.Name)
                    </MChip>
                }
            </MChipGroup>
        </div>
    </div>
</ScrollContainer>

<MultiListDialog @bind-Visible="showShare"
                 Title="@(I18n.T("Share.SelectShare"))"
                 DynamicListItems="shareItems">
</MultiListDialog>

<DeleteDialog @bind-Visible="showDelete"
              Title="@(I18n.T("Diary.Delete.Title"))"
              Content="@(I18n.T("Diary.Delete.Content"))"
              OnOK="HandleDelete">
</DeleteDialog>

<ExportDialog @bind-Visible="showExport"
              Value="exportDiaries">
</ExportDialog>